<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%
    // 检查用户是否登录且是保姆角色
    Integer userId = (Integer) session.getAttribute("userId");
    Integer userRole = (Integer) session.getAttribute("userRole");

    if (userId == null) {
        response.sendRedirect("login.jsp");
        return;
    }

    if (userRole != 1) { // 1表示保姆角色
        response.sendRedirect("access-denied.jsp");
        return;
    }
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>保姆资料管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }

        .profile-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .profile-header h1 {
            font-size: 28px;
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .profile-header p {
            color: #7f8c8d;
            font-size: 16px;
        }

        .form-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 20px;
            color: #3498db;
            padding-bottom: 10px;
            margin-bottom: 20px;
            border-bottom: 2px solid #3498db;
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            flex: 1;
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s;
        }

        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .form-group textarea {
            min-height: 120px;
            resize: vertical;
        }

        .file-upload {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .upload-preview {
            width: 120px;
            height: 120px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px dashed #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f9f9f9;
        }

        .upload-preview img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }

        .upload-icon {
            font-size: 24px;
            color: #7f8c8d;
        }

        .btn-submit {
            background: linear-gradient(90deg, #3498db, #2980b9);
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: block;
            margin: 20px auto 0;
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .form-hint {
            font-size: 13px;
            color: #888;
            margin-top: 5px;
        }

        .error-message {
            color: #e74c3c;
            background-color: #feeceb;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
            text-align: center;
            display: none;
        }

        @media (max-width: 768px) {
            .form-row {
                flex-direction: column;
                gap: 0;
            }

            .container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="profile-header">
            <h1>保姆资料管理</h1>
            <p>请完善您的保姆资料信息</p>
        </div>

        <div class="error-message" id="errorMessage">
            <% if (request.getParameter("error") != null) { %>
                <%= request.getParameter("error") %>
            <% } %>
        </div>

        <form action="nanny-profile" method="post" enctype="multipart/form-data">
            <div class="form-section">
                <div class="section-title">基本信息</div>

                <div class="form-group">
                    <label for="b_name">姓名</label>
                    <input type="text" id="b_name" name="b_name" placeholder="请输入您的姓名" required>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="b_experience">工作经验</label>
                        <select id="b_experience" name="b_experience" required>
                            <option value="">请选择</option>
                            <option value="1年以下">1年以下</option>
                            <option value="1-3年">1-3年</option>
                            <option value="3-5年">3-5年</option>
                            <option value="5年以上">5年以上</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="b_type">服务类型</label>
                        <select id="b_type" name="b_type" required>
                            <option value="">请选择</option>
                            <option value="育儿保姆">育儿保姆</option>
                            <option value="月嫂">月嫂</option>
                            <option value="老人护理">老人护理</option>
                            <option value="病患护理">病患护理</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <div class="section-title">服务详情</div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="b_health">健康状态</label>
                        <select id="b_health" name="b_health" required>
                            <option value="">请选择</option>
                            <option value="健康">健康</option>
                            <option value="良好">良好</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="b_price">期望薪资 (元/月)</label>
                        <input type="number" id="b_price" name="b_price" min="3000" max="20000" required>
                    </div>
                </div>

                <div class="form-group">
                    <label for="b_description">个人简介</label>
                    <textarea id="b_description" name="b_description" placeholder="请描述您的专业经验、技能特点、服务理念等..." required></textarea>
                </div>
            </div>

            <div class="form-section">
                <div class="section-title">上传照片</div>

                <div class="form-group">
                    <label for="b_photo">个人照片</label>
                    <div class="file-upload">
                        <div class="upload-preview" id="photoPreview">
                            <div class="upload-icon">📷</div>
                        </div>
                        <input type="file" id="b_photo" name="b_photo" accept="image/*">
                    </div>
                    <p class="form-hint">支持JPG、PNG格式，大小不超过2MB</p>
                </div>
            </div>

            <button type="submit" class="btn-submit">保存资料</button>
        </form>
    </div>

    <script>
        // 当页面加载完成时
        document.addEventListener('DOMContentLoaded', function() {
            const errorMessage = document.getElementById('errorMessage');
            const photoInput = document.getElementById('b_photo');
            const photoPreview = document.getElementById('photoPreview');

            // 检查URL中是否有错误参数
            const urlParams = new URLSearchParams(window.location.search);
            const errorParam = urlParams.get('error');

            if (errorParam) {
                errorMessage.textContent = decodeURIComponent(errorParam);
                errorMessage.style.display = 'block';
            }

            // 照片预览功能
            photoInput.addEventListener('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        photoPreview.innerHTML = `<img src="${e.target.result}" alt="预览">`;
                    }
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
</body>
</html>